<template>
    <main-wrap :bodyStyle="{height:'100%',overflow: 'hidden'}">
        <div class="ad-set-box">
            <div class="adSetItem">
                <h5>Set advertising space<br/>payment rules</h5>
                <div class="btn">
                    <my-button text='GO' @click="openDg(6)"/>
                </div>
            </div>
            <div class="adSetItem">
                <h5>Advertising reward<br/>distribution rules</h5>
                <div class="btn">
                    <my-button text='GO' @click="openDg(7)"/>
                </div>
            </div>
        </div>
        <my-dailog v-if="showFlag" v-model:show="showFlag" :showtopclose="true" :styleType="openType">
            <pay-rule v-if="openType==6" :ruleDetail='ruleDetail' @close="closeDg"/>
            <distribution-rule v-else-if="openType==7" :ruleDetail='ruleDetail' @close="closeDg"/>
            <!-- <h1 v-for="dt in 60" :key="dt">{{dt}}</h1> -->
        </my-dailog>
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed } from 'vue'
import { useStore } from 'vuex'
import {useRoute,useRouter} from 'vue-router'
import mainWrap from '@/components/mainWrap.vue'
import {toast} from '@/utils/common.js'
import myButton from '@/components/myButton.vue'
import payRule from './components/payRule.vue'
import distributionRule from './components/distributionRule.vue'
export default {
    components:{
        mainWrap,
        myButton,
        payRule,
        distributionRule
    },
    setup(){
        const store = useStore()
        const route = useRoute()

        const state = reactive({
            showFlag:false,
            openType:'',
            arLandmarkId:'',
            ruleDetail:{}
        })

        onMounted(()=>{
            state.arLandmarkId = route.query.arlandmarkid
            getRuleDetail()
        })

        const getRuleDetail = async ()=>{
           const res = await store.dispatch('ad/get_rule_detail',state.arLandmarkId)
           state.ruleDetail = res.data || {}
        }

        const openDg= (flag)=>{
            state.openType = flag
            state.showFlag = true
        } 
        
        const closeDg = ()=>{
            state.showFlag=false
            getRuleDetail()
        }

        return {
            ...toRefs(state),
            openDg,
            closeDg
        }
    }
}
</script>

<style lang="scss" scoped>
    .ad-set-box{
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        .adSetItem{
            width: 600px;
            height: 350px;
            background: url(/images/adset/set.png) left top no-repeat;
            background-size: 100% 100%;
            padding: 30px;
            text-align: center;
            &+.adSetItem{
                margin-left: 50px;
            }
            h5{
                font-family: Poppins-SemiBold, Poppins;
                font-weight: 600;
                color: #DFFCFF;
                font-size: 32px;
                text-shadow: 0px 0px 6px #07A3FB;
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparen;
                line-height: normal;
                padding: 30px 0 0 0;
            }
            .btn{
                width: 200px;
                margin: 50px auto 0 auto;
            }
        }
    }
</style>